<template>
  <div class="box">
    <TopSearch
      @searchHeader="searchHeader"
      :control="control"
      :controlPosition="[]"
      :positionName="''"
      :disabled="[]"
      :searchConfig="setFormConfig"
    > 
    <template #DataImport>
      <el-popconfirm title="是否確定集體更新" confirm-button-text="確定"
    cancel-button-text="取消"
    width="220"
    @confirm="allClick">
        <template #reference>
              <el-button color="#2292A4" class="ml-[45px]" >
              集體更新
            </el-button>
        </template>
      </el-popconfirm>
    </template>
     </TopSearch>
    <ProTable
      class="protable"
      ref="table"
      :data="tableData"
      :page="page"
      :column="column"
      :rowControl="[]"
      :elProps="elProps"
      :disabled="[]"
      :controlWidth="controlWidth"
      @page-change="onPageChange"
      @pageRefresh="pageRefresh"
    >
      <template #default="{ row, propname }">
          <el-input v-if="propname === 'points_num'" type="number" v-model="row[propname]" ></el-input>
          <el-input v-if="propname === 'remark'"  v-model="row[propname]" ></el-input>

      </template>
        <template #search_operate>
            <el-table-column  fixed="right" width="200px" label="操作">
              <template #default="scope">
               <div class="flex justify-around">
                <el-link  type="primary" :underline="false"  @click="update(scope.row,scope.$index, )" >更新</el-link >
               </div>
              </template>
            </el-table-column>
        </template>
    </ProTable>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted } from "vue"
import { elProps,controlWidth } from "./index.js"
import { setFormConfig } from "./formConfig";
 import {warehouse,updateWarehouse} from '@/http/index.js'
 import {messageBox,message,loading,closeLoading} from '@/common/function.js'
import { useRouter } from "vue-router";

// 分页数据（不给就没有分页）
const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 10, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
// 字段名对应表头
const column = {
  name: "產品名稱",
  number:'產品編號',
  num:'當前學校庫存量',
  points_num: "點倉數量",
  remark:'備註',
};
// 表格顶部操作按钮
const control = ["search"];

// 未选中数据是 禁用项
const disabled = ["dels"];
const delsable = ref(true);

const searchHeader = (e) => {
    Object.assign(obj, e);
      tableList();
};


/**
 * @e {number} 分页操作后的值（当前页|改变后的每页条数）
 * @type {string} <current|size> 分页操作类型（当前页改变|每页条数改变）
 */
const onPageChange = async({ e, type }) => {
  if (type == "current") {
    obj.page = e
  }
  if (type == "size") {
     obj.page = 1
    obj.limit = e
  }
  await tableList()
};


const obj = reactive({
  school_id:localStorage.getItem('school_id'),
  page: page.current_page,
  limit: page.per_page,
  status:1,
  name: "",
  time: "",
});
const tableData = ref([])
const tableList = async ()=>{
  loading()
  const data = await warehouse(obj)
  console.log(data);
  if (data.code == 200) {
    page.current_page = data.data.current_page
    page.per_page = data.data.per_page
    page.total = data.data.total
    tableData.value = data.data.data
  }
  closeLoading()
}
const update = async(row)=>{
  let val = [row]
  const data = await updateWarehouse(val)
  if (data.code == 200) {
    await tableList()
  }
}
const allClick = async()=>{
   const data = await updateWarehouse(tableData.value)
  if (data.code == 200) {
    await tableList()
  }
}
const pageRefresh = async()=>{
  await tableList()
}
onMounted(() => {
  tableList()
})
</script>

<style lang="less" scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.box {
  padding: 16px 33px;
}
.button{
  color: #fff;
}
</style>